<template>
  <div>
     <el-page-header  @back="$router.push('/drivermanagement')" content="司机详情" class="huidan" style="margin-bottom:20px"></el-page-header>
      <el-card style="height:500px;">

            <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="基本信息" name="first">
 <el-row type="flex" justify="space-around" style="font-size: 14px;">
      <el-col class="infos">员工编号：{{formData.userId}}</el-col>
      <el-col>司机名称：{{formData.name}}</el-col>
      <!-- v-if="formData.agency"  不加这个就报错 -->
      <el-col v-if="formData.agency">所属机构：{{formData.agency.name}}</el-col>
    </el-row>
    <el-row type="flex" justify="space-around" style="font-size: 14px;margin-top:12px;">
      <el-col>电话:{{formData.mobile}}</el-col>
      <el-col>年龄：{{formData.age}}</el-col>
      <el-col></el-col>
    </el-row>
    </el-tab-pane>

    <!--  -->
    <el-tab-pane label="驾驶证信息" name="second">
      <el-row type="flex" justify="space-around" style="margin-bottom:15px;font-size: 14px;">
        <el-col>驾驶证号：{{License.licenseNumber}}</el-col>
        <el-col>准驾车型：{{License.allowableType}}</el-col>
        <el-col>初次领证日期：{{License.initialCertificateDate}}</el-col>
      </el-row>
 <el-row type="flex" justify="space-around" style="margin-bottom:15px;font-size: 14px;">
        <el-col>驾驶证有效期限：{{License.validPeriod}}年</el-col>
        <el-col>驾龄：{{License.driverAge}}年</el-col>
        <el-col>驾驶证类型：{{License.licenseType}}</el-col>
      </el-row>
       <el-row type="flex" justify="space-around" style="margin-bottom:15px;font-size: 14px;">
        <el-col>从业资格证：{{License.qualificationCertificate}}</el-col>
        <el-col>入场证信息：{{License.passCertificate}}</el-col>
        <el-col></el-col>
      </el-row>
      <el-row style="margin-bottom:15px;font-size: 14px;" type="flex">
       图片信息
       <!-- <el-upload
  action="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/ae510574-d222-49ad-b0ce-88cc96508705.png"
  :on-preview="preview"
  list-type="picture-card" >
</el-upload> -->
  <img src="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/ae510574-d222-49ad-b0ce-88cc96508705.png" class="imgurl" >
  <img src="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/aac52c2f-a273-4130-be35-5d7de7e577ff.png" class="imgurl" >
      </el-row>
    </el-tab-pane>
  </el-tabs>

      </el-card>
       <el-card>
   <el-row type="flex" justify="center">
      <el-button type="danger" class="btn" @click="edit">编辑</el-button>
   </el-row>
   </el-card>
  </div>
</template>

<script>
import { getDriverLicense, getDriverListInfo } from '@/api/drivermanagement'
export default {
  name: 'driver-info',
  data () {
    return {
      imgUrl: 'https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/ae510574-d222-49ad-b0ce-88cc96508705.png',
      License: {},
      activeName: 'first',
      formData: {},
      userId: this.$route.params.id // 拿到id
    }
  },
  methods: {
    preview (file) {
      console.log(file)
    },
    handleClick (tab, event) {
      // console.log(tab, event)
      // console.log(event)
    },
    async  getInfoType () {
      // console.log(this.userId)
      const r = await getDriverListInfo(this.userId)
      console.log(r)
      this.formData = r.data
      const res = await getDriverLicense(this.userId)
      console.log(res)
      this.License = res.data
      this.imgUrl = res.data.picture
    },
    edit () {
      console.log(1)
    }
  },
  created () {
    this.getInfoType()
    this.handleClick()
  }
}
</script>

<style lang="scss" scoped>
.btn {
  background-color: rgb(225, 85, 54);
    color: rgb(255, 255, 255);
    width: 110px;
    border-radius: 5px;
    font-weight: 400;
    border: 1px solid rgb(225, 85, 54)
}
.imgurl {

 width: 212px;
    height: 159px;
    border: 1px solid rgb(216, 221, 227);
    border-radius: 4px;
    margin-right: 20px;
    margin-left:60px;
}
</style>
